<template>
    <div class="case-content">
        <div class="case-header">
            <div class="case-header-content">
                <div class="w1200">
                    <div class="case-header-title">
                        数字化赋能见证<span>非凡增长</span>
                    </div>
                    <div class="case-desc">一站式智慧运营管理解决方案，众多驾校数字化转型的口碑之选</div>
                </div>
            </div>
        </div>
        <div class="w1200">
            <div class="case-title">精选案例</div>
            <div class="carousel">
                <div class="case-prev">
                    <img src="https://image.lutongjiakao.com/system/2dcd8faba5224120b8d127d82b3e5e94.png" alt="">
                </div>
                <Swiper class="case-swiper" :modules="swiperModules" :loop="true" :speed="450"
                    :navigation="{ prevEl: '.case-prev', nextEl: '.case-next' }">
                    <SwiperSlide v-for="item in cases" :key="item.id">
                        <div class="slide">
                            <div class="slide-img">
                                <img :src="item.image" alt="" />
                                <div class="slide-hover-mask">
                                    <img :src="item.mask" alt="">
                                </div>
                            </div>
                            <div class="slide-content">
                                <div class="author">
                                    <div class="name">{{ item.name }}</div>
                                </div>
                                <div class="desc">{{ item.desc }}</div>
                                <div class="tags">
                                    <span class="tag" v-for="t in item.tags" :key="t">{{ t }}</span>
                                </div>
                            </div>
                        </div>
                    </SwiperSlide>
                </Swiper>
                <div class="case-next">
                    <img src="https://image.lutongjiakao.com/system/f312167dad6b41e1add732870410ba51.png" alt="">
                </div>
            </div>
        </div>

        <div class="excellent">
            <div class="w1200">
                <div class="excellent-title">优秀案例</div>
                <div class="case-grid">
                    <div class="grid-item" v-for="item in excellentCases" :key="item.id">
                        <div class="thumb">
                            <img :src="item.image" alt="" />
                        </div>
                        <div class="name">{{ item.name }}</div>
                        <div class="hover-mask">
                            <img :src="item.mask" alt="">
                        </div>
                    </div>
                </div>
                <div class="more-wrap">
                    <div class="more-btn">查看更多</div>
                </div>
            </div>
        </div>
        <div class="case-momment">
            <div class="momment-title">真的好用 他们替你试过了</div>
            <div class="saycontent">
                <div class="say-wrapper">
                    <div class="sayList">
                        <div class="say-item" v-for="(item, index) in sayData" :key="index">
                            <div class="say-img">
                                <img :src="item.avatar" alt="">
                            </div>
                            <div class="flex flex-column">
                                <div class="say-title">
                                    {{ item.name }}
                                </div>
                                <div class="say-desc">
                                    {{ item.desc }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 复制一份相同的内容以实现无缝滚动 -->
                    <div class="sayList" aria-hidden="true">
                        <div class="say-item" v-for="(item, index) in sayData" :key="index">
                            <div class="say-img">
                                <img :src="item.avatar" alt="">
                            </div>
                            <div class="flex flex-column">
                                <div class="say-title">
                                    {{ item.name }}
                                </div>
                                <div class="say-desc">
                                    {{ item.desc }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="say-wrapper">
                    <div class="sayList">
                        <div class="say-item" v-for="(item, index) in sayData" :key="index">
                            <div class="say-img">
                                <img :src="item.avatar" alt="">
                            </div>
                            <div class="flex flex-column">
                                <div class="say-title">
                                    {{ item.name }}
                                </div>
                                <div class="say-desc">
                                    {{ item.desc }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 复制一份相同的内容以实现无缝滚动 -->
                    <div class="sayList" aria-hidden="true">
                        <div class="say-item" v-for="(item, index) in sayData" :key="index">
                            <div class="say-img">
                                <img :src="item.avatar" alt="">
                            </div>
                            <div class="flex flex-column">
                                <div class="say-title">
                                    {{ item.name }}
                                </div>
                                <div class="say-desc">
                                    {{ item.desc }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="case-partner">
            <partner />
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, A11y } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import partner from '../homePage/components/partner.vue'


const cases = ref<any>([
    {
        id: 1,
        image: 'https://image.lutongjiakao.com/system/fa7c1126b3db44dc83884138fa3afb89.png',
        name: '宏安驾校',
        desc: '“有了绿通云PaaS系统的加持，轻松解决驾校各项业务的难题，让经营管理越来越高效，学员服务越来越好”',
        tags: ['中小型驾校', '数字化转型'],
        mask: 'https://image.lutongjiakao.com/system/e7456f7077ef422a852fffeb6d727b43.jpg'
    },
    {
        id: 2,
        image: 'https://image.lutongjiakao.com/system/1ff55d8c0fb64f2d965b24c813ffb61e.jpg',
        name: '骅晟驾校',
        desc: '“有了绿通云PaaS管理系统，各校区数据在线互通，让驾校管理变得更加精细。”',
        tags: ['小型驾校', 'PaaS门店'],
        mask: 'https://image.lutongjiakao.com/system/e7456f7077ef422a852fffeb6d727b43.jpg'
    },
    {
        id: 3,
        image: 'https://image.lutongjiakao.com/system/a42d4b6403d94fada02d562872b60c67.png',
        name: '小鹿易驾驾校',
        desc: '“绿通云PaaS管理系统的功能非常符合驾校日常管理经营所需，大幅提高了驾校对学员和内部事务的管理效率。”',
        tags: ['大型驾校', '数字化转型'],
        mask: 'https://image.lutongjiakao.com/system/e7456f7077ef422a852fffeb6d727b43.jpg'
    }
])

const swiperModules = [Navigation, A11y]

// 优秀案例网格数据
const excellentCases = ref<any[]>([
    {
        id: 101,
        name: '宏业驾校',
        image: 'https://image.lutongjiakao.com/system/504d241e128248dabee049a3a7bb6f51.jpg',
        mask: 'https://image.lutongjiakao.com/system/e7456f7077ef422a852fffeb6d727b43.jpg'
    },
    {
        id: 102,
        name: '兰剑驾校',
        image: 'https://image.lutongjiakao.com/system/1982f4641b274f02ba79888eb67ceba3.png',
        mask: 'https://image.lutongjiakao.com/system/e7456f7077ef422a852fffeb6d727b43.jpg'
    },
    {
        id: 103,
        name: '顺驰驾校',
        image: 'https://image.lutongjiakao.com/system/29df6c51410b41b18abdf6214f0920a4.png',
        mask: 'https://image.lutongjiakao.com/system/e7456f7077ef422a852fffeb6d727b43.jpg'
    },
    {
        id: 104,
        name: '永安驾校',
        image: 'https://image.lutongjiakao.com/system/6322b6d1b9a64f3f901be61c550bed58.png',
        mask: 'https://image.lutongjiakao.com/system/e7456f7077ef422a852fffeb6d727b43.jpg'
    },
    {
        id: 105,
        name: '星兰剑驾校',
        image: 'https://image.lutongjiakao.com/system/f3d208bb8f7b40ce8c1d1b14fe66294a.png',
        mask: 'https://image.lutongjiakao.com/system/e7456f7077ef422a852fffeb6d727b43.jpg'
    },
    {
        id: 106,
        name: '明宏驾校',
        image: 'https://image.lutongjiakao.com/system/bfedff7bdc3c49eb82282012a58a9a20.png',
        mask: 'https://image.lutongjiakao.com/system/e7456f7077ef422a852fffeb6d727b43.jpg'
    },
    {
        id: 107,
        name: '安立驾校',
        image: 'https://image.lutongjiakao.com/system/c2ae6bcbf5c34dd49f36d8a1f7fd8a33.png',
        mask: 'https://image.lutongjiakao.com/system/e7456f7077ef422a852fffeb6d727b43.jpg'
    },
    {
        id: 108,
        name: '恒锌成驾校',
        image: 'https://image.lutongjiakao.com/system/b20b9c15261d40b7a9591a43a0ccaca9.jpg',
        mask: 'https://image.lutongjiakao.com/system/e7456f7077ef422a852fffeb6d727b43.jpg'
    },
    {
        id: 109,
        name: '海朝阳光驾校',
        image: 'https://image.lutongjiakao.com/system/6f51e5c21a9a4f0d8fb2c0d5f7a68c2a.jpg',
        mask: 'https://image.lutongjiakao.com/system/e7456f7077ef422a852fffeb6d727b43.jpg'
    },
])

const sayData = ref<any>([
    {
        id: 1,
        avatar: 'https://images.unsplash.com/photo-1607746882042-944635dfe10e?q=80&w=200&auto=format&fit=crop',
        name: '宁静致远',
        desc: '绿通云越做越强了，我们跟着受益啊，真不错！',

    },
    {
        id: 2,
        avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=200&auto=format&fit=crop',
        name: '林海雪原',
        desc: '多年老客 一路相伴 不离不弃'
    },
    {
        id: 3,
        avatar: 'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?q=80&w=200&auto=format&fit=crop',
        name: '艺书社',
        desc: '每周的更新都太及时了'
    },
    {
        id: 4,
        avatar: 'https://images.unsplash.com/photo-1607746882042-944635dfe10e?q=80&w=200&auto=format&fit=crop',
        name: '宁静致远',
        desc: '绿通云越做越强了，我们跟着受益啊，真不错！',

    },
    {
        id: 5,
        avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=200&auto=format&fit=crop',
        name: '林海雪原',
        desc: '多年老客 一路相伴 不离不弃'
    },
    {
        id: 6,
        avatar: 'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?q=80&w=200&auto=format&fit=crop',
        name: '艺书社',
        desc: '每周的更新都太及时了'
    }
])
</script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.case-header {
    height: rem(360);
    background-image: url('https://image.lutongjiakao.com/system/1f368e6601364e7095f7fe393e1bcf1c.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: rem(50);

}

.case-header-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;

    .case-header-title {
        font-size: rem(36);
        color: #fff;
        font-weight: bold;
        margin-bottom: rem(10);

        span {
            color: rgb(17, 200, 113);
        }
    }

    .case-desc {
        font-size: rem(14);
        font-weight: 500;
        margin-bottom: rem(10);
        color: #fff;
    }

}

.w1200 {
    width: rem(900);
    margin: 0 auto;
}

.case-title {
    text-align: center;
    font-weight: 800;
    font-size: rem(32);
    color: #111;
    margin: rem(40) 0 rem(20);
}

.carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: rem(12);
}

.case-swiper {
    flex: 1;
    border-radius: rem(15) 0 0 rem(15);
    height: rem(255);
}

.case-prev,
.case-next {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(232, 248, 239);
    width: rem(64.5);
    height: rem(64.5);
    border-radius: 50%;

    img {
        width: rem(25);
        height: rem(25);
    }
}

.viewport {
    overflow: hidden;
    flex: 1;
    border-radius: rem(18);
    box-shadow: 0 18px 50px rgba(56, 0, 255, 0.08);
    background: #fff;
}

.track {
    display: flex;
    width: 100%;
    transition: transform 420ms ease;
}

.slide {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: stretch;
    gap: rem(20);
    min-width: 100%;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    // height: rem(305);
    height: rem(255);

    &:hover .slide-hover-mask {
        opacity: 1;
        pointer-events: auto;
    }
}

.slide-img {
    overflow: hidden;
    position: relative;
    border-radius: 0 rem(15) rem(15) 0;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slide-hover-mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
        font-size: rem(18);
        font-weight: 600;
        z-index: 2;

        img {
            width: rem(140);
            height: rem(140);
            border-radius: rem(15);
        }
    }
}

.slide-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: rem(24);
}

.author {
    display: flex;
    align-items: center;
    gap: rem(12);
    margin-bottom: rem(10);
}

.avatar {
    width: rem(40);
    height: rem(40);
    border-radius: 50%;
}

.name {
    font-weight: 700;
    color: #222;
}

.desc {
    color: rgb(102, 102, 102);
    font-size: rem(13);
    line-height: 1.8;
}

.tags {
    margin-top: rem(14);
}

.tag {
    display: inline-block;
    padding: 0 rem(12);
    height: rem(24);
    line-height: rem(24);
    border-radius: rem(12);
    background: rgb(232, 248, 239);
    color: rgb(37, 207, 107);
    font-size: rem(12);
    margin-right: rem(8);
}

.nav {
    width: rem(56);
    height: rem(56);
    border-radius: 50%;
    border: none;
    background: rgba(122, 79, 255, 0.08);
    cursor: pointer;
    position: relative;
}

.nav::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: rem(16);
    height: rem(16);
    border-right: rem(3) solid #7a4fff;
    border-bottom: rem(3) solid #7a4fff;
    transform: translate(-50%, -50%) rotate(225deg);
}

.nav-right::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

/* 优秀案例 */
.excellent {
    margin-top: rem(50);
    padding: rem(20) 0 rem(50);
}

.excellent-title {
    text-align: center;
    font-weight: 800;
    font-size: rem(35);
    color: #111;
    margin-bottom: rem(35);
}

.case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    // background-color: #f9fafc;
    padding: rem(10) rem(20);
    row-gap: rem(15);
    column-gap: rem(40);
}

.grid-item {
    background: #fff;
    border-radius: rem(12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.3s;
}

.hover-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    font-size: rem(18);
    font-weight: 600;
    z-index: 2;

    img {
        width: rem(140);
        height: rem(140);
        border-radius: rem(15);
    }
}

.grid-item:hover .hover-mask {
    opacity: 1;
    pointer-events: auto;
}

.hover-name {
    padding: rem(8) rem(18);
    background: rgba(0, 0, 0, 0.35);
    border-radius: rem(8);
    font-size: rem(18);
    font-weight: 600;
}

.name {
    text-align: center;
    padding: rem(20) 0;
    font-size: rem(16);
    color: #222;
}

.more-wrap {
    display: flex;
    justify-content: center;
    margin-top: rem(50);
}

.more-btn {
    background: #111;
    color: #fff;
    border: none;
    border-radius: rem(50);
    padding: rem(13.5) rem(46);
    cursor: pointer;
    font-size: rem(18);
}

.case-momment {
    margin-top: rem(50);
    padding: rem(70) 0 rem(80);
    background: #F5F9FF;
    overflow: hidden; // 添加溢出隐藏
    position: relative;
}

.momment-title {
    text-align: center;
    font-weight: 800;
    font-size: rem(35);
    color: #111;
    margin-bottom: rem(75);
}

.saycontent {
    width: 100%;
    overflow: hidden;
}

.say-wrapper {
    display: flex;
    width: max-content; // 让容器宽度适应内容
    animation: loop-scroll 20s linear infinite;
}

.sayList {
    display: flex;
    align-items: center;
    margin: rem(15);
}

.say-item {
    padding: rem(20) rem(15);
    background-color: #fff;
    border-radius: rem(15);
    display: flex;
    align-items: center;
    gap: rem(10);
    margin: 0 rem(15);
    flex-shrink: 0;
    white-space: nowrap; // 防止文字换行
}

.say-img {
    width: rem(40);
    height: rem(40);
    border-radius: 50%;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.say-title {
    font-size: rem(14);
    color: #000;
    font-weight: bold;
}

.say-desc {
    font-size: rem(14);
    color: #7D8995;
    font-weight: 400;
}

// .say-wrapper:hover {
//     animation-play-state: paused;
// }

@keyframes loop-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.case-partner {
    margin-bottom: rem(100);
}
</style>